<template>
	<view class="shop-street">
		<view class="search-box">
			<u-search class="content" v-model="keyword" wrap-bg-color="#f8f8f8" bg-color="#f8f8f8"
				search-icon-color="#ababab" :height="70" placeholder-color="#ababab" @search="downCallback"
				@clear="downCallback">
			</u-search>
		</view>
		<mescroll-body v-if="appConfig.shop_street_hide" ref="mescrollRef" @init="mescrollInit" @down="downCallback"
			@up="upCallback" :up="upOption">
			<view class="shop-street-content">
				<scroll-view class="bg-white" :scroll-x="true" :scroll-with-animation="true">
					<view class="store-category">
						<view class="store-item" v-for="(item,index) in shopList" :key="index"
							@click="gresetUrl(item.id)">
							<view class="store-info">
								<view style="margin-bottom: 15rpx;font-size: 25rpx;font-weight: 700;">
									<text
										style="display: inline-block;height: 32rpx;line-height: 32rpx;margin-right: 10rpx;padding: 0 10rpx;font-size: 24rpx;color: #fff;background-color: #f46f52;border-radius: 4rpx;"
										v-if="item.city_text">{{item.city_text}}</text>{{item.name}}
								</view>
								<view>
									<image style="width: 16rpx;height: 22rpx;margin-right: 10rpx;"
										src="../../static/images/icon_shop_dis.png"></image>
									<text
										style="margin-right: 10rpx;font-size: 24rpx;color: #5e5e5e;">{{item.shop_address+item.address}}</text>
								</view>
							</view>
							<view class="store-distance">
								<text v-if="item.distance">{{item.distance.toFixed(2)}}km</text>
							</view>
						</view>
					</view>
				</scroll-view>
			</view>
		</mescroll-body>
		<view v-else class="flex-col col-center" style="margin-top: 200rpx;">
			<image class="img-null" src="/static/images/goods_null.png"></image>
			<view class="muted">
				暂无数据~
			</view>
		</view>
	</view>

</template>

<script>
	import {
		mapGetters,
		mapMutations,
		mapActions
	} from 'vuex'
	import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins";
	import {
		getShopList,
	} from "@/api/shop"
	import Cache from "@/utils/cache";
	import {
		SHOP_CODE
	} from "@/config/cachekey";
	export default {
		mixins: [MescrollMixin],
		data() {
			return {
				keyword: "",
				shopList: [],
				upOption: {
					auto: false,
					empty: {
						icon: '/static/images/goods_null.png',
						tip: "暂无数据～",
					},
				}
			}
		},
		async onLoad() {
			if (this.locationInfo == null) {
				this.getLocationFunc();
			}
			uni.$off("refreshhome");
			// 监听是否刷新页面
			uni.$on("refreshhome", () => {
				this.downCallback();
			});
		},
		onShareAppMessage() {
			const shareInfo = this.appConfig.share
			return {
				title: shareInfo.mnp_share_title,
				path: "pages/shop_street/shop_street?invite_code=" + this.inviteCode
			};
		},
		methods: {
			...mapActions(["getShop", "getLocationFunc"]),
			async downCallback() {
				this.mescroll.resetUpScroll();
			},
			onReflesh() {
				this.shopList = []
				this.mescroll.resetUpScroll();
			},
			changeActive(index) {
				this.active = index
				this.onReflesh()
			},
			upCallback(page) {
				let pageNum = page.num;
				let pageSize = page.size;
				const {
					keyword,
					active
				} = this
				getShopList({
					name: this.keyword,
					page_no: pageNum,
					page_size: pageSize,
					...this.locationInfo
				}).then(res => {
					if (res.code == 1) {
						let curPageData = res.data.list;
						let curPageLen = curPageData.length;
						let hasNext = !!res.data.more;
						if (page.num == 1) {
							this.shopList = [];
						}
						this.shopList = this.shopList.concat(curPageData);
						this.mescroll.endSuccess(curPageLen, hasNext);
					}
				}).catch(err => {
					this.mescroll.endErr()
				})
			},
			gresetUrl(id) {
				Cache.set(SHOP_CODE, id);
				this.getShop();
				uni.$emit('refreshhome');
				let return_url = uni.getStorageSync("shop_street_return_url")
				if (return_url) {
					uni.reLaunch({
						url: return_url
					});
					uni.removeStorageSync("shop_street_return_url")
				} else {
					uni.reLaunch({
						url: '/pages/index/index?shop_code=' + id
					});
				}
			}
		},
		computed: {
			...mapGetters(["locationInfo"])
		},
	}
</script>

<style lang="scss">
	.shop-street {
		.search-box {
			padding: 20rpx;
			background-color: #fff;
		}

		.store-category {
			width: 100%;
			padding: 20rpx;
			background-color: #f6f6f6;

			.store-item {
				position: relative;
				display: flex;
				align-items: center;
				margin-bottom: 20rpx;
				padding: 24rpx 30rpx;
				flex-grow: 1;
				break-inside: avoid-column;
				background-color: #fff;
				border-radius: 8rpx;

				.store-info {
					flex: 1;
					margin-right: 20rpx;
				}

				.store-distance {
					font-size: 28rpx;
					color: #5e5e5e;
				}
			}
		}

		.store-container {
			padding: 0 30rpx;
		}
	}
</style>